<template>
  <div>
    <Cascader :data='typeData'
              v-model='selectedTypeData'
              trigger='hover'
              class="type-select"></Cascader>
    <Input v-model='title' />
    <mavon-editor v-model='content'
                  ref='md'
                  @imgAdd='imgAdd'
                  @change='change'
                  style='min-height: 400px'></mavon-editor>
    <button @click='submit'>提交</button>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import { Cascader, Input } from 'view-design'
import 'mavon-editor/dist/css/index.css'
import { GetMainSubTypes, AddOneBlog } from '../../api/getData'

export default {
  name: 'blogWriting',
  components: {
    mavonEditor,
    Cascader,
    Input
  },
  data () {
    return {
      content: '',
      html: '',
      title: '',
      selectedTypeData: [],
      typeData: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'gugong',
              label: '故宫'
            },
            {
              value: 'tiantan',
              label: '天坛'
            },
            {
              value: 'wangfujing',
              label: '王府井'
            }
          ]
        },
        {
          value: 'jiangsu',
          label: '江苏',
          children: [
            {
              value: 'nanjing',
              label: '南京',
              children: [
                {
                  value: 'fuzimiao',
                  label: '夫子庙'
                }
              ]
            },
            {
              value: 'suzhou',
              label: '苏州',
              children: [
                {
                  value: 'zhuozhengyuan',
                  label: '拙政园'
                },
                {
                  value: 'shizilin',
                  label: '狮子林'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  mounted () {
    this.getAllBlogMainSubTypes()
  },
  methods: {
    imgAdd (pos, $file) {
      let formdata = new FormData()
      this.$upload
        .post('/上传接口地址', formdata)
        .then(res => {
          window.console.log(res.data)
          this.$refs.md.$img2Url(pos, res.data)
        })
        .catch(err => {
          window.console.log(err)
        })
    },
    change (value, render) {
      this.html = render
    },
    submit () {
      let params = new FormData()
      if (this.selectedTypeData.length !== 2) {
        this.$Message.error('没有选择博客类型')
        return
      }
      if (this.title.trim() === '') {
        this.$Message.error('没有添加博客标题')
      }
      params.append('blogContent', this.content)
      params.append('blogTitle', this.title)
      this.$Message.info(this.selectedTypeData[1])
      params.append('blogContentForeignKey', this.selectedTypeData[1])
      AddOneBlog(params, (result) => {
        if (result.errorCode === 'OK') {
          this.$Message.info('添加博客成功')
        }
      })
    },
    getAllBlogMainSubTypes () {
      GetMainSubTypes({}, result => {
        if (result.errorCode === 'OK') {
          this.typeData = []
          for (let i = 0; i < result.data.length; i++) {
            let item = result.data[i]
            let hasExist = false
            let existIndex = 0
            for (let j = 0; j < this.typeData.length; j++) {
              if (this.typeData[j].value === item.blogMainTypeRefid) {
                hasExist = true
                existIndex = j
                break
              }
            }
            if (hasExist) {
              if (this.typeData[existIndex].children === null) {
                this.typeData[existIndex].children = []
              }
              this.typeData[existIndex].children.push(
                { value: item.blogSubTypeRefid, label: item.subTypeName }
              )
            } else {
              this.typeData.push(
                {
                  value: item.blogMainTypeRefid,
                  label: item.mainTypeName,
                  children: [ { value: item.blogSubTypeRefid, label: item.subTypeName } ]
                }
              )
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.blog-type {
  padding-bottom: 20px;
  height: 100px;
}
</style>
